
//endcourse 已上课程样式
import React from 'react';
import './css/endcourse.less';
import Rewarder from './Rewarder';
import moment from 'moment';
import {Link} from 'react-router-dom';
import Modal2 from '../components/Modal2.js';
import http from '../../utils/http';


class MyClassform extends React.Component{
 
 state = {
    tdShow:false,
    evaluation:"",
    feedback:false,
    feedbackEvaluation:"",
    isvideo:false,
    videourl:"",
    havedata:false,
    placeholders:"感谢对于外教老师或是课程教学相关评论"
 }

  // 判断课程状态----mock返回值有问题
  getClassStatus=(status)=>{
      switch(status){
         case 1: return "未开始" 
         case 2: return "未开始"
         case 3: return "正在进行"
         case 4: return "正常结束" 
         case 5: return "异常结束"
         case 6: return "缺席上课"
         default : return ""
      }
  }
  getClassColor=(status)=>{
    switch(status){
       case 4: return "normaltitlecolor" 
       case 5: return "unnormaltitlecolor"
       case 6: return "absent"
       default : return ""
    }
}
  //判断是否加载奖牌模块
  Ifreward=(dateText)=>{
    if(dateText.status===2){
      return <Rewarder  medals={dateText.medals}/>
    }
  }



showEvaluation= () => {
  this.setState({tdShow: true,placeholders:"感谢对于外教老师或是课程教学相关评论"});
 
}
notshowEvaluation= () => {
  this.setState({tdShow: false,isvideo:false,havedata:false});
 
}
// 评价内容控制
Evaluation=( event) => {
  this.setState({evaluation: event.target.value});
}
// 教师反馈内容控制
teacherEvaluation=( event) => {
  this.setState({feedbackEvaluation: event.target.value});
}
// 鼠标移入事件
onmouseEnter=()=>{
  
  this.setState({placeholders:""})

}

// 调用本地classin
enterClass= () => { 
  http
      .get('/classin/find/classVideoUrl', {
        params: {
          classId: this.props.dataText.id
        }
      })
      .then(data => {
        if(data.length===0){
          this.setState({
            havedata:true,
            isvideo:false
          })
        }else{
          this.setState({
            havedata:false,
            videourl:data[0].videoUrl,
            isvideo:true
          })
        }
        
        
      }, err => {
      
    })
}
//提交评价
sure= () => { 
  this.setState({tdShow: false,evaluation:""});
  http
      .post('class/find/feedback',{
        params: {
          feebackBean: this.state.evaluation
        }
      })
      .then(data => {
        // 数据提交以后关闭弹出框
      
      }, err => {
       
  })
}
//教师反馈
feedback= () => { 
  http
      .get('class/find/teacher/evaluate')
      .then(data => {
        // 数据提交以后关闭弹出框
        this.setState({
          feedbackEvaluation: data,
          feedback: true
        })

      }, err => {
       
  })
}

componentDidMount(){
}
    render(){
        return (
          <div  className="col-lg-12 col-md-12 col-sm-12 col-xs-12 endCourseform">
            <div className="panel panel-default">
              <div className={this.getClassColor(this.props.dataText.status)+" panel-footer"} id="myclass">
                <span>
                   {
                     this.getClassStatus(this.props.dataText.status)
                   }
                </span>
                <b> {this.props.dataText.title}</b>
                {/* 判断是否加载奖牌模块 */}
                
                  {/* this.Ifreward(this.props.dataText) */}
              
              </div>
              <div className="panel-body borderbottom ">
                <ul className="fl courseDetails  col-md-11 col-xs-12">
                   <li className="nowclassType">
                     <b>课程类型</b>
                     <i>{this.props.dataText.type ===1?'体验课':(this.props.dataText.type ===2?'常规课':'复习课')}</i>
                   </li>
                   <li className="nowClassTime">
                     <b>上课时间</b>
                     <i>{moment(Number(this.props.dataText.classTime)).format('YYYY[年]MM[月]DD[日] HH:mm')}</i>
                   </li>
                   <li className="nowClassCont">
                     <b>课程内容</b><i>{this.props.dataText.classContent}</i>
                   </li>
                </ul> 
                {/* <div className="classState col-md-2 col-xs-12">
                {this.props.dataText.reviewStatus ===1?
                // 已经复习
                  (<ul>
                    <li className="myreview">课后复习</li>
                    <li className="myoeder">{this.props.dataText.reviewStatus ===1?this.props.dataText.reviewScore+'分':'未复习'}</li>
                    <li className="repeat"> */}
                    {/* 第一版 复习先不做*/}
                    {/* <Link to={"review"}>
                      <button>再来一次 </button>
                    </Link>   */}
                    {/* </li>
                  </ul>):
                  // 未复习
                  ( <ul>
                     <li className="notreview">开始复习</li>
                  </ul>)}
                </div> */}
              
              </div>

              <div id="myclasswh"> 
                  <ul>
                  <Link to={`/admin/teachingcontent/?lessonid=${this.props.dataText.courseLessonId}`}>
                    <li className="classcontent">教学内容</li>
                  </Link>
                    <li className="myrepeat" onClick={this.enterClass}>课程回放</li>
                    <li className="evaluation" onClick={this.showEvaluation}>评价课程                      
                    </li>
                      {
                        // 评价课程：模态框的显隐进行判断
                        this.state.tdShow?<Modal2 >
                                              <div>
                                                <header className="modal-header noborder">  
                                                    <h4>评价课程</h4>  
                                                    <span className="close"
                                                      onClick={()=>{
                                                          this.setState({
                                                              tdShow:!this.state.tdShow
                                                            })
                                                      }}>
                                                      <img src={require('../../images/XX.png')} alt="xx" style={{marginRight:"15px"}}/> 
                                                    </span>  
                                                </header>  
                                                <div className="modal-body">  
                                                  <textarea value={this.state.evaluation} className="Evaluation" placeholder={this.state.placeholders} onChange={this.Evaluation} onFocus={this.onmouseEnter}>  </textarea>  
                                                </div>  
                                                <div className="sub" > 
                                                  <button className="sure" onClick={this.sure}>提交</button>  
                                                </div>
                                                
                                                {/* <footer className="modal-footer">  
                                                  <button className="cancel" onClick={this.notshowEvaluation}>取消</button>  
                                                  <button className="sure" onClick={this.sure}>确定</button>  
                                                </footer>   */}
                                              </div>
                                        </Modal2>:''
                      }
                      {this.props.dataText.status===2?<li className="evaluation" onClick={this.feedback}>教师反馈 </li>:""}
                      {/* {
                        //教师反馈
                        this.state.feedback?
                          <Modal2 >
                            <div>
                              <header className="modal-header">  
                                  <h4>这是老师对你的评价哦：</h4>  
                                  <span className="close"
                                    onClick={()=>{
                                      this.setState({
                                        feedback:!this.state.feedback
                                        })
                                    }}>×</span>  
                              </header>  
                              <div className="modal-body">  
                                <p value="fgg" className="Evaluation" > {this.state.feedbackEvaluation} </p>  
                              </div>  
                                
                            </div>
                          </Modal2>
                        :''
                      } */}
                  </ul> 
                </div>

                {
              // 课程回放
              this.state.isvideo?<Modal2 >
                                              <div>
                                                <header className="modal-header noborder">  
                                                    <h4>课程回放</h4> 
                                                     
                                                </header>  
                                                <div className="modal-body">  
                                                 <video width="600" height="240" controls="controls">
                                                    <source src={this.state.videourl} type="video/mp4" />
                                                    <source src="movie.ogg" type="video/ogg" />
                                                    <source src="movie.webm" type="video/webm" />
                                                    <object data="movie.mp4" width="320" height="240">
                                                      <embed src="movie.swf" width="320" height="240" />
                                                    </object>
                                                  </video>
                                               
                                                </div>  
                                                <div className="sub" > 
                                                  <button className="sure" onClick={this.notshowEvaluation}>关闭</button>  
                                                </div>
                                                
                                                {/* <footer className="modal-footer">  
                                                  <button className="cancel" onClick={this.notshowEvaluation}>取消</button>  
                                                  <button className="sure" onClick={this.sure}>确定</button>  
                                                </footer>   */}
                                              </div>
                                        </Modal2>:''
           }  
            {
            // 提示模态框
            this.state.havedata?<Modal2 >
                                  <div>
                                    <header className="modal-header tip-header">  
                                        <h4 className="tip">温馨提示</h4>  
                                        <span className="tipclose"
                                            onClick={()=>{
                                                this.setState({
                                                  havedata:!this.state.havedata
                                                  })
                                            }}>
                                            <img src={require('../../images/XX.png')} alt="xx" /> 
                                        </span>  
                                    </header>  
                                    <div className="modal-body">  
                                      <p className="testclass"> 课件上传中，请稍后再试</p>
                                    </div>  
                                    <footer className="modal-footer tip-footer">  
                                      <p className="cancel" onClick={this.notshowEvaluation}>知道了</p>  
                                       
                                    </footer>  
                                  </div>
                              </Modal2>:''
           }  
            </div>
         
          </div>
        )
    }
}

export default MyClassform